<template>
  <div>
    <div class="head">
      <a-input
        v-model:value="page.content"
        placeholder="请输入名称"
        class="head-search"
      ></a-input>
      <a-button @click="searchData">搜索</a-button>
      <a-button @click="add" type="primary" class="add">
        <template #icon>
          <PlusOutlined />
        </template>
        新建
      </a-button>
    </div>
    <div>
      <a-table :columns="columns" :dataSource="dataSource">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button class="ant-sign" @click="add(record)" type="primary"> 编辑 </a-button>
            <a-button class="ant-link" @click="delUserBtn(record)"> 删除 </a-button>
          </template>
        </template>
      </a-table>
    </div>

    <a-modal
      :title="signId === '' ? '添加签目' : '编辑签目'"
      v-model:open="open"
      @ok="handelOk"
      @cancel="handleCancel"
      ok-text="确认"
      cancel-text="取消"
      centered
    >
      <a-form :model="addForm">
        <a-form-item
          label="签目"
          name="content"
          :rules="[{ required: true, message: '请输入签目内容!' }]"
        >
          <a-input v-model:value="addForm.content" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref, createVNode } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { getsignList, addSign, editSign, delSign } from "@/api/sign";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const page = ref({
  pageNo: 1,
  pageSize: 10,
  content: ''
});

const open = ref(false);
const signId = ref('')

const columns = [
  {
    title: "名称",
    dataIndex: "content",
    key: "content",
  },
  {
    title: "创建时间",
    key: "createTime",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    key: "action",
    dataIndex: "action",
  },
];
const dataSource = ref([])

    
const addForm = ref({
  content: "",
  type: 1
});

const searchData = () => {
  getList()
};

const add = (data) => {
  open.value = true;
  if(data?.id !== undefined) {
    addForm.value.content = data.content
    signId.value = data?.id
    addForm.value.id = data.id
  }
};

const handelOk = async () => {
  const res = signId.value === '' ? await addSign(addForm.value) : await editSign(addForm.value)
  console.log('添加/编辑', res);
  if(res.code === 200 ){
    getList()
  }
  handleCancel();
};

const handleCancel = () => {
  open.value = false;
  addForm.value = {
    content: "",
    type: 1
  };
};

const getList = async () => {
  const res = await getsignList(page.value)
    console.log("res", res.data.list);
    if(res.code === 200) {
      dataSource.value = res.data.list;
      page.value.pageNo = 1;
    }
};

const delUserBtn = (value) => {
   Modal.confirm({
    title: '是否确认删除该签目?',
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      console.log('OK');
      delSign(value.id).then(res => {
        console.log('删除', res);
        getList()
      })
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
}

onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.head {
  display: flex;
  .head-search {
    width: 200px;
    margin-right: 16px;
    margin-bottom: 24px;
  }
  .add {
    margin-left: 16px;
  }
}
.ant-link {
  color: #2daaff;
  margin-left: 16px;
}
.ant-sign {
  background: #2daaff;
  color: #ffffff;
}
</style>
